<template>
  <div />
</template>

<script setup lang="ts">
import { ElNotification } from "element-plus";

import { h, ref, onMounted, onUnmounted } from "vue";
interface MyMessage {
  id: number;
  messageId: number;
  messageTitle: string;
  messageContent: string;
  messageLevel: number;
  targetType: number;
  publisherId: number;
  publisherName: string;
  publishTime: string;
  userId: number;
  userName: string;
  readStatus: number;
  readTime: string | null;
  createTime: string;
  createName: string;
  createUser: number;
  modifyTime: string;
  modifyName: string;
  modifyUser: number;
  isDelete: number;
}
const props = defineProps<{
  messageList: MyMessage[];
}>();
const emit = defineEmits<{
  (e: "readMessage", message: MyMessage): void;
}>();
// 在消息循环中添加通知实例引用
const notifications = ref<any[]>([]); // 新增：存储通知实例

const noticeDetailRef = ref();
//获取未读消息

// 获取用户消息
const checkNewMessages = async () => {
  //每次调用该方法时，先关闭之前的通知
  notifications.value.forEach((notification) => {
    if (notification && notification.close) {
      notification.close();
    }
  });

  try {
    props.messageList.forEach((msg: MyMessage, index: number) => {
      setTimeout(() => {
        const notification = ElNotification({
          title: "消息",
          customClass: "message-popup",
          message: () =>
            h("div", { style: "width: 100%", class: "w-full" }, [
              h("div", { style: "width: 100%;display: flex; justify-content: space-between" }, [
                h("div", { style: "color: teal" }, msg.messageTitle),
                h(
                  "div",
                  {
                    style: msg.readStatus
                      ? "color: #4080ff; cursor: not-allowed;"
                      : "color: #f56c6c; cursor:pointer;",
                  },
                  msg.readStatus ? "已读" : "未读"
                ),
              ]),
            ]),
          position: "bottom-right",
          // duration: 1500,
          zIndex: 9999,
          onClick: () => {
            emit("readMessage", msg);

            notification.close();
          },
        });
        notifications.value.push(notification); // 存储实例
      }, 100 * index);
    });
  } catch (error) {
    console.error("获取消息失败:", error);
  }
};
watch(
  () => [...props.messageList],
  (newVal, oldVal) => {
    //如果有新消息则重新渲染通知列表checkNewMessages，已读消息不重新渲染
    console.log("newVal", newVal, "oldVal", oldVal);
    if (
      newVal.length !== oldVal?.length ||
      newVal.some((msg: MyMessage) => !oldVal.find((m) => m.id === msg.id))
    )
      checkNewMessages();
  },
  {
    deep: true,
    immediate: true,
    flush: "post",
  }
);

onMounted(() => {
  console.log(props.messageList, "组件挂载完成");
  checkNewMessages();
});

onUnmounted(() => {
  notifications.value.forEach((notification) => {
    console.log(notification, "notification");

    if (notification && notification.close) {
      notification.close();
    }
  });
});
</script>

<style lang="scss">
.message-popup {
  .el-notification__group {
    width: 100%;
    height: 100%;
  }
}
</style>
